<template>
	<view class="warp">
		<uni-nav-bar background-color="#fff"
		 color="#232323" :border="false" :fixed="true"
		  @clickLeft="left"  left-icon="left" 
		   leftWidth="50rpx" rightWidth="10rpx" 
		   :statusBar="true"  
		   >
		   <view class="title_box">
		 	 <view class="left">
				<view class="left_text">
					我的卡卷
				</view>
			</view>
		 	<view class="right"  >
				<uni-icons color="#797979" fontFamily="CustomFont" :size="26">{{'\ue62b'}}</uni-icons>
		 	</view>
		   </view>
		</uni-nav-bar>
		 
		<view class="cont_box">
			<view class="tab_list">
				<view @click="changetab(index)" :class="tabIndex==index?'active':'item'" v-for="(item,index) in tabtitlelist" :key="index">
					<view class="tetx">
						{{item.name}}
						<view class="b_line">
							
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<swiper 
		:current="tabIndex"
		duration="300"
		class="swiper_box"
		@change="changsw"
		>
			<swiper-item v-for="(item,index) in 5" :key="index">
				<scroll-view  scroll-y class="list-scroll-content">
					<!-- 数据列表 -->
					<template>
						 <view class="tab_cont_box">
						 	 <view class="signlist">
						 	 	<view class="item"  v-if="index==0 || index==1">
						 	 		<view class="top">
						 	 			<view class="left">
						 	 				<view class="l_top">
						 	 					五分钟连麦卷
						 	 				</view>
						 					<view class="l_bottom">
						 						有效期至 2025.03.18
						 					</view>
						 	 			</view>
						 				<view class="right">
						 					<span style="font-size: 60rpx; font-weight: 550;margin-right: 10rpx;">5</span><span>分钟</span>
						 				</view>
						 	 		</view>
						 			<view class="bottom">
						 				<view class="left">
						 					限未咨询过的达人可用 （1V1不可用）
						 				</view>
						 				<view class="right">
						 					<view class="button">
						 						去使用
						 					</view>
						 				</view>
						 			</view>
						 	 	</view>
								<view class="item"  v-if="index==0 || index==3">
									<view class="top">
										<view class="left">
											<view class="l_top">
												报告满减卷
											</view>
											<view class="l_bottom">
												有效期至 2025.03.18
											</view>
										</view>
										<view class="right">
											<span style="font-size: 60rpx; font-weight: 550;margin-right: 10rpx;">3</span><image style="width: 40rpx;height: 40rpx;" src="/static/images/gold.png" mode=""></image>
										</view>
									</view>
									<view class="bottom">
										<view class="left">
											满29.99读道金币可用
										</view>
										<view class="right">
											<view class="button">
												去使用
											</view>
										</view>
									</view>
								</view>
								<view class="item" v-if="index==0 || index==2">
									<view class="top">
										<view class="left">
											<view class="l_top">
												提问卷
											</view>
											<view class="l_bottom">
												有效期至 2025.03.18
											</view>
										</view>
										<view class="right">
											<span style="font-size: 60rpx; font-weight: 550;margin-right: 10rpx;">1</span> 
										    <span>次</span>
										</view>
									</view>
									<view class="bottom">
										<view class="left">
											婚姻、健康、事业、合婚问题可用
										</view>
										<view class="right">
											<view class="button">
												去使用
											</view>
										</view>
									</view>
								</view>
						 	 </view>
				
						 </view>
					</template>
				</scroll-view>
				
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabtitlelist:[{name:'全部'},{name:'连麦卷'},{name:'新手体验卷'},
				                {name:'兑换券'},{name:'满减券'}],
				tabIndex:0,
			};
		},
		methods:{
			changetab(idx){
				this.tabIndex=idx
			},
			changsw(e){
				this.tabIndex=e.detail.current
				
			},
			left(){
				uni.navigateBack({delta:1})
			},
		}
	}
</script>
<style>
	page{
		
		background-color: #f2f2f2;
	}
</style>
<style lang="scss">
.warp{
	.title_box{
		padding: 0 0rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			display: flex;
			align-items: center;
			.left_text{
				font-size: 30rpx !important;
				margin-right: 10rpx;
				
			}
			.left_icon{
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border: 2rpx solid #323333;
				border-radius: 50%;
				
			}
			
		}
	}
	
	.cont_box{
		 
		padding: 20rpx;
		background-color: #fff;
		white-space: nowrap;
		overflow: hidden;
		.tab_list{
			padding: 10rpx 20rpx;
			// display: flex;
			// justify-content: flex-start;
			overflow-x: scroll;
			box-sizing: border-box;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			.item{
				display: inline-block;
				 margin-right: 100rpx;
				color: #7c7e7e;
				font-size: 28rpx;
				.tetx{
					display: inline-block;
				}
			}
			.active{
				 
				display: inline-block;
				color: #232323;
				font-size: 30rpx;
				 margin-right: 100rpx;
				.tetx{
					display: inline-block;
					text-align: center;
					.b_line{
						margin-top: 6rpx;
						height: 6rpx;
						background-color: #73ddf9;
						border-radius: 3rpx;
					}
				}
			}
		}
	}
	.swiper_box{
		  height: calc(100vh - 100px);
		  // background-color: #fff;
	}
	.list-scroll-content{
		height: 100%;
	}
	.tab_cont_box{
		padding: 10rpx 20rpx;
		text-align: center;
		// background-color: red;
		// height: 100vh;
		.signlist{
			padding: 10rpx 20rpx;
		.item{
			padding: 20rpx 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin-top: 20rpx;
		    .top,.bottom{
				display: flex;
				justify-content: space-between;
			    align-items: center;
				padding: 10rpx;
			}
			.top{
				
				border-bottom: 2rpx solid #cecece;
			   .left{
				   text-align: left;
				   .l_top{
					   font-size: 36rpx;
				   }
				   .l_bottom{
					   font-size: 26rpx;
				      // color: #cecece;
					  margin-top: 12rpx;
				   }
			   }
			   .right{
				   color: #f4953a;
			   }
			}
			.bottom{
				.left{
					font-size: 26rpx;
					 color: #cecece;
				}
				.right{
					.button{
						padding: 10rpx 30rpx;
						background-color: #55ffff;
					    border-radius: 26rpx;
					}
				}
			}
		}
	}
	}
}
</style>
